<template>
    <div style="padding: 12px 0px; width: 100%; height: 100%">
        <a-row style="width: 100%; height: 100%; position: relative">
            <a-col :span="12">
                <flexbox justify="center" style="box-sizing: border-box">
                    <flexbox direction="column" style="min-width: 120px">
                        <div style="font-size: 14px; color: #999999; margin: 0 0 12px 0">
                            <span>业务需求</span>
                            <a-tag :color="info[0].addCount - info[0].lastAddCount > 0 ? 'red' : 'green'" v-if="info[0].lastAddCount && info[0].addCount != info[0].lastAddCount" style="margin-left: 4px; border-radius: 10px">
                                {{ info[0].addCount - info[0].lastAddCount > 0 ? '+' : '-' }} {{ info[0].lastAddCount ? (Math.abs(info[0].addCount - info[0].lastAddCount) / info[0].lastAddCount).toFixed(2) : '' }}
                            </a-tag>
                        </div>
                        <flexbox direction="column" justify="center" align="center" style="height: 44px">
                            <span class="font-w-b" style="font-size: 28px; margin-bottom: 12px">{{ info[0].addCount }}</span>
                        </flexbox>
                    </flexbox>
                </flexbox>
            </a-col>
            <a-col :span="12">
                <flexbox justify="center" style="box-sizing: border-box">
                    <flexbox direction="column" style="min-width: 120px">
                        <div style="font-size: 14px; color: #999999; margin: 0 0 12px 0">
                            <span>产品需求</span>
                            <a-tag :color="info[1].addCount - info[1].lastAddCount > 0 ? 'red' : 'green'" v-if="info[1].lastAddCount && info[1].addCount != info[1].lastAddCount" style="margin-left: 4px; border-radius: 10px">
                                {{ info[1].addCount - info[1].lastAddCount > 0 ? '+' : '-' }} {{ info[1].lastAddCount ? (Math.abs(info[1].addCount - info[1].lastAddCount) / info[1].lastAddCount).toFixed(2) : '' }}
                            </a-tag>
                        </div>
                        <flexbox direction="column" justify="center" style="height: 44px">
                            <span class="font-w-b" style="font-size: 28px; margin-bottom: 12px">{{ info[1].addCount }}</span>
                        </flexbox>
                    </flexbox>
                </flexbox>
            </a-col>
        </a-row>

        <flexbox justify="space-between" style="margin-top: 12px">
            <a-tag style="border: 1px solid #97d1ff; background: rgba(4, 120, 211, 0.12); color: #666666">
                进行中版本：<span>{{ detail.processVersion.length }}</span>
            </a-tag>
            <a-tag style="border: 1px solid #b7eb8f; background: #f6ffed; color: #666666">
                已发布版本：<span>{{ detail.releaseVersion.length }}</span>
            </a-tag>
            <a-tag style="border: 1px solid #ffe58f; background: #fffbe6; color: #666666">
                进行中延期版本：<span>{{ detail.processOverDueVersion.length }}</span>
            </a-tag>
        </flexbox>
    </div>
</template>

<script lang="ts">
import filters from '@/utils/filter';
import { defineComponent, reactive, toRefs, watch, ref, unref } from 'vue';
export default defineComponent({
    props: {
        info: {
            type: Object,
            default: () => ({})
        },
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const state = reactive<any>({
            taskOption: null,
            proOption: null,
            defaultProOption: { seriesName: '产品需求数量', title: '产品需求总数', numTotal: 0 }
        });
        // 获取业务需求
        const getTaskList = () => {
            const { startTime, endTime } = filters.reportTimeRangeFilter(props.detail.reportName, props.detail.reportType);
            const businessInfos = props.detail.businessInfos.filter((item) => {
                const time = new Date(item.issueCreateTime).getTime();
                return time <= new Date(endTime).getTime() && time >= new Date(startTime).getTime();
            });
            const { typeArr, dataArr } = getPieChartData(businessInfos, 'issueType');
            state.taskOption = {
                typeArr,
                dataArr,
                seriesName: '业务需求数量',
                title: '业务需求总数',
                numTotal: businessInfos.length
            };
        };
        // 获取产品需求
        const getProList = () => {
            const { startTime, endTime } = filters.reportTimeRangeFilter(props.detail.reportName, props.detail.reportType);
            const productInfos = props.detail.productInfos.filter((item) => {
                const time = new Date(item.issueCreateTime).getTime();
                return time <= new Date(endTime).getTime() && time >= new Date(startTime).getTime();
            });
            const { typeArr, dataArr } = getPieChartData(productInfos, 'issueType');
            state.proOption = {
                typeArr,
                dataArr,
                seriesName: '产品需求数量',
                title: '产品需求总数',
                numTotal: productInfos.length
            };
        };
        // 转化成图表数据
        const getPieChartData = (list, field) => {
            const typeArr: any = [];
            const dataArr: any = [];
            const group = {};
            list.forEach((item) => {
                group[item[field]] = group[item[field]] || { value: 0 };
                group[item[field]].value++;
            });
            const typesArr = Object.keys(group);
            typesArr.forEach((item) => {
                if (group[item] && group[item].value) {
                    typeArr.push(item);
                    dataArr.push({
                        value: group[item].value,
                        name: item
                    });
                }
            });
            return {
                dataArr,
                typeArr
            };
        };

        watch(
            () => props.detail,
            (n) => {
                if (n.businessInfos && n.businessInfos.length) {
                    getTaskList();
                }
                if (n.productInfos && n.productInfos.length) {
                    getProList();
                }
            },
            { deep: true, immediate: true }
        );

        return {
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-tag) {
    margin-right: 0 !important;
}
</style>